<template>
  <div id="app" class="h-full">
      <!--Header-->
      <mu-appbar title="" class="example-appbar" :class="{'nav-hide': !open}">
        <mu-icon-button @click="toggleNav" icon="menu" slot="left"/>

        <mu-flat-button label="华东一区" class="demo-flat-button" ref="button" @click="toggle"/>
        <mu-popover :trigger="trigger" :open="dropOpen" @close="handleDropClose">
          <mu-menu>
            <mu-menu-item title="Refresh" />
            <mu-menu-item title="Send feedback" />
            <mu-menu-item title="Settings" />
            <mu-menu-item title="Help" />
            <mu-menu-item title="Sign out" />
          </mu-menu>
        </mu-popover>

        <mu-badge content="10" slot="right" circle secondary>
          <mu-icon value="notifications"/>
        </mu-badge>

        <mu-badge content="12" slot="right" circle secondary>
          <mu-icon value="menu"/>
        </mu-badge>

        <mu-avatar class="wx-avatar" slot="right" color="deepOrange300" backgroundColor="purple500">WX</mu-avatar>

      </mu-appbar>

      <!--Sidebar-->
      <app-sider :open="open" :docked="docked"></app-sider>

      <!--Content-->
      <div class="example-content h-full" :class="{'nav-hide': !open}">
        <router-view></router-view>
      </div>

  </div>
</template>

<script>

  export default {
    name: 'app',
    data(){
      const desktop = isDesktop()
      return{
        open: desktop,
        docked: desktop,
        desktop: desktop,
        title: '',
        dropOpen:false,
        trigger:null
      }
    },
    mounted () {
      this.trigger = this.$refs.button.$el
    },
    methods: {
      toggle () {
        this.dropOpen = !this.dropOpen
      },
      handleDropClose (e) {
        this.dropOpen = false
      },
      toggleNav () {
        this.open = !this.open
      },
      handleMenuChange (path) {
        if (!this.desktop) this.open = false
      }
    },
    components: {
      "appSider":require('../src/blocks/appSider.vue')
    }
  }

  function isDesktop () {
    return window.innerWidth > 993
  }

</script>

<style>

  .mu-appbar{
    color: #424242 !important;
  }

  .example-appbar {
    background-color: #ffffff !important;
    position: fixed;
    left: 256px;
    right: 0;
    top: 0;
    width: auto !important;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }

  .example-appbar.nav-hide {
    left: 0;
  }


  .example-content{
    color: #666;
    padding-top: 64px;
    padding-left: 256px;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }

  .example-content.nav-hide {
    padding-left: 0;
  }

  .content-wrapper{
    padding: 48px 72px;
  }

  @media (min-width: 480px) {
    .example-content{
      padding-top: 64px;
    }
  }

  @media (max-width: 993px) {
    .example-appbar {
      left: 0;
    }
    .example-content{
      padding-left: 0;
    }
    .content-wrapper {
      padding: 24px 36px;
    }
  }

  /*.mu-popover {
    background-color: #fff !important;
  }

  .mu-menu-item-wrapper {
    color: #424242 !important;
  }*/

  .wx-avatar{
    width: 35px !important;
    height:35px !important;
    font-size: 14px !important;
    margin-left: 45px;
  }

  .mu-badge-container{
    margin-right: 26px;
    padding-top: 7px;
  }

</style>
